<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useSkusList } from '@/store/modules/skus/index'
import { onLoad, onReady } from '@dcloudio/uni-app'
import { cleararr } from '@/utils/getSkus'
import { SkusListState } from '../type'
import iconBack from '@/components/icon-backto/index.vue'
//引入upload组件 上传图片视频组件
import upload from '@/components/upload/index.vue'
// 上传图片视频组件请求头
import getheader from '@/apis/img-header'

//表单验证规则
// const formRules = reactive({
//     price: [
//         {
//             required: true,
//             trigger: ['blur', 'change'],

//             message: '请输入指导价',
//         },
//     ],
//     salePrice: [
//         {
//             required: true,
//             trigger: ['blur', 'change'],
//             message: '请输入实售价',
//         },
//     ],
// })
// //获取表单组件
// const detailForm = ref()
// onReady(() => {
//     console.log(detailForm.value)
//     detailForm.value[0].setRules(formRules)
// })
const store = useSkusList()
const list = ref<SkusListState[]>([])
//库存类型
enum stockType {
    LIMITED = '不限制库存',
    UNLIMITED = '限制库存',
}
//限购类型
enum limitType {
    UNLIMITED = '不限购',
    SKU_LIMITED = '规格限购',
}
//lable标签样式
const labelStyle = reactive({
    color: 'rgba(153, 153, 153, 1)',
    'font-size': '24rpx',
})
const stockTypeData = ref([
    {
        value: 'UNLIMITED',
        text: '不限制库存',
    },
    {
        value: 'LIMITED',
        text: '限制库存',
    },
])
const limitTypeData = ref([
    {
        value: 'UNLIMITED',
        text: '不限购',
    },
    {
        value: 'SKU_LIMITED',
        text: '规格限购',
    },
])
//图片上传地址
const action = import.meta.env.VITE_BASE_URL + import.meta.env.VITE_UPLOAD_URL

onLoad(() => {
    uni.$emit('updateTitle')
    console.log(2)
    if (store.SkusList.skus.length) {
        list.value = store.SkusList.skus
        console.log(list.value)
        list.value.forEach((item) => {
            item.imgList = [item.image]
        })
    } else {
        list.value = cleararr(store.SkusList.specGroupList)
    }
})

//平台类目点击事件
const handleClickPlat = (e: any) => {
    console.log(e.detail.value[0].value)
}
//保存list 然后传给上级页面
const handleSaveList = () => {
    let flag = false
    //判断salePrice不能大于price
    list.value.forEach((item) => {
        if (item.salePrice > item.price) {
            uni.showToast({
                title: '实售价不能大于指导价',
                icon: 'none',
            })
            flag = true
        }
    })
    if (flag) {
        return
    }
    store.SkusList.skus = list.value
    uni.navigateBack()
}
const handleSuccess = (e: any) => {}
const handleDelete = (e: any) => {
    console.log(e)
}
const handleBlur = (salePrice: any, price: any) => {
    if (salePrice > price) {
        uni.showToast({
            title: '实售价不能大于指导价',
            icon: 'none',
        })
    }
}
</script>

<template>
    <view class="content">
        <view class="content__top">
            <icon-back></icon-back>
            <button class="btn" style="margin-left: 150rpx" @click="handleSaveList">保存</button>
        </view>
        <view class="content__bottom">
            <scroll-view class="skuList" scroll-y="true">
                <template v-for="item in list" :key="item">
                    <view style="margin-bottom: 15rpx; border-bottom: 1px solid black">
                        <u-form ref="detailForm" :model="item" label-position="top" :border-bottom="false">
                            <u-form-item prop="name" label="规格组" :border-bottom="false" :label-style="labelStyle">
                                <view class="skuList__detail" :style="{ backgroundColor: '#F4F4F4' }">
                                    <u-input class="skuList__detail--text" type="text" :placeholder="item.specs.join('、')" maxlength="30" disabled />
                                </view>
                            </u-form-item>
                            <u-form-item label="规格组图片" :border-bottom="false" :label-style="labelStyle">
                                <view class="skuList__img">
                                    <upload
                                        v-model="item.image"
                                        :max="1"
                                        :choosenum="1"
                                        :maxleng="1"
                                        :action="action"
                                        :imglist="item.imgList"
                                        :choosetype="'img'"
                                        :headers="getheader()"
                                        @upload-success="handleSuccess"
                                        @img-delete="handleDelete"
                                    >
                                    </upload>
                                </view>
                            </u-form-item>
                            <u-form-item prop="price" label="指导价" :border-bottom="false" :label-style="labelStyle">
                                <view class="skuList__detail">
                                    <u-input
                                        v-model.number="item.price"
                                        class="skuList__detail--text"
                                        type="text"
                                        placeholder="长度不超过30个字符"
                                        maxlength="30"
                                    />
                                </view>
                            </u-form-item>
                            <u-form-item prop="salePrice" label="实售价" :border-bottom="false" :label-style="labelStyle">
                                <view class="skuList__detail">
                                    <u-input
                                        v-model.number="item.salePrice"
                                        class="skuList__detail--text"
                                        type="text"
                                        placeholder="长度不超过30个字符"
                                        maxlength="30"
                                        @blur="() => handleBlur(item.salePrice, item.price)"
                                    />
                                </view>
                            </u-form-item>
                            <u-form-item label="重量" :border-bottom="false" :label-style="labelStyle">
                                <view class="skuList__detail">
                                    <u-input
                                        v-model.number="item.weight"
                                        class="skuList__detail--text"
                                        type="text"
                                        placeholder="长度不超过30个字符"
                                        maxlength="30"
                                    />
                                </view>
                            </u-form-item>
                            <u-form-item label="限购类型" :border-bottom="false" :label-style="labelStyle">
                                <view class="skuList__selec">
                                    <uni-data-picker
                                        v-model="item.limitType"
                                        :localdata="limitTypeData"
                                        popup-title="限购类型"
                                        @change="handleClickPlat"
                                    >
                                        <template #default>
                                            <!-- +shopCategory -->

                                            <view class="skuList__selec--text">
                                                <text>{{ item.limitType === 'UNLIMITED' ? '不限购' : '规格限购' }}</text>
                                                <icon-down></icon-down>
                                            </view>
                                        </template>
                                    </uni-data-picker>
                                </view>
                            </u-form-item>
                            <u-form-item label="限购数量" :border-bottom="false" :label-style="labelStyle">
                                <view
                                    class="skuList__detail"
                                    :style="item.limitType === 'UNLIMITED' ? { backgroundColor: '#F4F4F4' } : { backgroundColor: '#fff' }"
                                >
                                    <u-input
                                        v-model.number="item.limitNum"
                                        class="skuList__detail--text"
                                        type="text"
                                        placeholder="长度不超过30个字符"
                                        maxlength="30"
                                        :disabled="item.limitType === 'UNLIMITED' ? true : false"
                                    />
                                </view>
                            </u-form-item>
                            <u-form-item
                                v-if="store.SkusList.list.productType !== 'REAL_PRODUCT' && !store.SkusList.list.id"
                                label="库存类型"
                                :border-bottom="false"
                                :label-style="labelStyle"
                            >
                                <view class="skuList__selec">
                                    <uni-data-picker
                                        v-model="item.stockType"
                                        :localdata="stockTypeData"
                                        popup-title="库存类型"
                                        @change="handleClickPlat"
                                    >
                                        <template #default>
                                            <!-- +shopCategory -->

                                            <view class="skuList__selec--text">
                                                <text>{{ item.stockType === 'UNLIMITED' ? '不限库存' : '规格库存' }}</text>
                                                <icon-down></icon-down>
                                            </view>
                                        </template>
                                    </uni-data-picker>
                                </view>
                            </u-form-item>
                            <u-form-item v-if="!store.SkusList.list.id" label="库存" :border-bottom="false" :label-style="labelStyle">
                                <view
                                    class="skuList__detail"
                                    :style="item.stockType === 'UNLIMITED' ? { backgroundColor: '#F4F4F4' } : { backgroundColor: '#fff' }"
                                >
                                    <u-input
                                        v-model.number="item.stock"
                                        class="skuList__detail--text"
                                        type="text"
                                        placeholder="0"
                                        maxlength="30"
                                        :disabled="item.stockType === 'UNLIMITED' ? true : false"
                                    />
                                </view>
                            </u-form-item>
                            <u-form-item label="初始销量" :border-bottom="false" :label-style="labelStyle">
                                <view class="skuList__detail" style="margin-bottom: 30rpx">
                                    <u-input
                                        v-model.number="item.initSalesVolume"
                                        class="skuList__detail--text"
                                        type="text"
                                        placeholder="长度不超过30个字符"
                                        maxlength="30"
                                    />
                                </view>
                            </u-form-item>
                        </u-form>
                    </view>
                </template>
            </scroll-view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
@include b(content) {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    @include e(top) {
        flex: 1;
        padding: 80rpx 0 19rpx 16rpx;
        display: flex;
        justify-content: space-between;
    }
    @include e(bottom) {
        height: 1132rpx;
    }
}
@include b(btn) {
    width: 440rpx;
    height: 90rpx;
    background-color: #4755e9;
    color: #ffffff;
}
@include b(skuList) {
    height: 1132rpx;
    background-color: rgba(252, 252, 252, 1);
    display: flex;
    border-radius: 50rpx 50rpx 0 0;
    box-sizing: border-box;
    padding: 40rpx 22rpx 0 34rpx;
    @include e(detail) {
        width: 694rpx;
        border-radius: 16rpx;
        color: rgba(204, 204, 204, 1);
        font-size: 24rpx;
        border: 2rpx solid rgba(204, 204, 204, 1);
        padding-left: 20rpx;
        @include m(text) {
            color: black;
            font-size: 24rpx;
        }
    }
    @include e(span) {
        margin-top: 18rpx;
        color: rgba(196, 196, 196, 1);
        font-size: 24rpx;
    }
    @include e(selec) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 694rpx;
        height: 60rpx;
        border-radius: 16rpx;
        color: rgba(204, 204, 204, 1);
        font-size: 24rpx;
        border: 2rpx solid rgba(204, 204, 204, 1);
        padding: 0 20rpx;
    }
}
:deep(.input-value-border) {
    border: none;
}
</style>
